<template>
	<view class="tui-pagination__box">
		<view
			class="tui-pagination__btn"
			:class="{ 'tui-pagination__disabled': currentIndex === 1, 'tui-pagination__hover': currentIndex !== 1 }"
			:style="{ width: width + 'rpx', height: height + 'rpx', borderColor: borderColor, backgroundColor: backgroundColor, borderRadius: radius }"
			@click="clickPrev"
		>
			<text :style="{ color: color, fontSize: size + 'rpx' }" v-if="!custom">{{ prevText }}</text>
			<slot name="prev"></slot>
		</view>

		<view class="tui-pagination__num" v-if="isPage">
			<text :style="{ color: currentColor, fontSize: pageFontSize + 'rpx' }">{{ currentIndex }}</text>
			<text :style="{ color: pageColor, fontSize: pageFontSize + 'rpx' }">/{{ maxPage || 0 }}</text>
		</view>

		<view
			class="tui-pagination__btn"
			:class="{ 'tui-pagination__disabled': currentIndex === maxPage, 'tui-pagination__hover': currentIndex !== maxPage }"
			:style="{ width: width + 'rpx', height: height + 'rpx', borderColor: borderColor, backgroundColor: backgroundColor, borderRadius: radius }"
			@click="clickNext"
		>
			<text :style="{ color: color, fontSize: size + 'rpx' }" v-if="!custom">{{ nextText }}</text>
			<slot name="next"></slot>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, watch, onBeforeMount, onMounted } from 'vue'

const emit = defineEmits(['prev', 'next', 'change'])

const props = defineProps({
	prevText: {
		type: String,
		default: '上一页'
	},
	nextText: {
		type: String,
		default: '下一页'
	},
	width: {
		type: Number,
		default: 156
	},
	height: {
		type: Number,
		default: 68
	},
	borderColor: {
		type: String,
		default: 'transparent'
	},
	backgroundColor: {
		type: String,
		default: '#fff'
	},
	color: {
		type: String,
		default: '#333'
	},
	size: {
		type: [Number, String],
		default: 28
	},
	radius: {
		type: String,
		default: '8rpx'
	},
	//是否自定义按钮显示内容
	custom: {
		type: Boolean,
		default: false
	},
	//当前页码
	current: {
		type: [Number, String],
		default: 1
	},
	//当前页码字体颜色
	currentColor: {
		type: String,
		default: '#5677fc'
	},
	//页码字体颜色
	pageColor: {
		type: String,
		default: '#333'
	},
	//页码字体大小
	pageFontSize: {
		type: [Number, String],
		default: 36
	},
	//是否需要展示页码
	isPage: {
		type: Boolean,
		default: true
	},
	//数据总量
	total: {
		type: [Number, String],
		default: 0
	},
	//每页数据量
	pageSize: {
		type: [Number, String],
		default: 10
	}
})

const currentIndex = ref(1)

const maxPage = computed(() => {
	let max = 1
	let total = Number(props.total)
	let pageSize = Number(props.pageSize)
	if (total && pageSize) {
		max = Math.ceil(total / pageSize)
	}
	return max
})

watch(
	() => props.current,
	nVal => {
		currentIndex.value = +nVal
	}
)

onBeforeMount(() => {
	currentIndex.value = +props.current
})

const clickPrev = () => {
	if (Number(currentIndex.value) === 1) return
	currentIndex.value -= 1
	change('prev')
}

const clickNext = () => {
	if (Number(currentIndex.value) === props.maxPage) return
	currentIndex.value += 1
	change('next')
}

const change = e => {
	emit('change', {
		type: e,
		current: currentIndex.value
	})
}
</script>

<style lang="scss" scoped>
.tui-pagination__box {
	flex: 1;
	/* #ifndef APP-NVUE */
	width: 100%;
	display: flex;
	/* #endif */
	position: relative;
	overflow: hidden;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.tui-pagination__btn {
	/* #ifndef APP-NVUE */
	display: flex;
	box-sizing: border-box;
	/* #endif */
	position: relative;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;
	/* #ifdef APP-NVUE */
	border-width: 0.5px;
	/* #endif */

	/* #ifndef APP-NVUE */
	border-width: 1rpx;
	/* #endif */
	border-style: solid;
	flex-shrink: 0;
	/* #ifdef H5 */
	cursor: pointer;
	/* #endif */
}

.tui-pagination__hover:active {
	opacity: 0.5;
}

.tui-pagination__num {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.tui-pagination__disabled {
	opacity: 0.3;
	/* #ifdef H5 */
	cursor: not-allowed;
	/* #endif */
}
</style>
